<!--  -->
<template>
  <div class="home_swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item @click="toDetail(v.goods_id)" v-for="(v, i) in banners" :key="i"
        ><img :src="v.image_src" alt=""
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getBanner } from "@/util/home.js";
export default {
  name: "HomeSwiper",
  data() {
    return {
      banners: [],
    };
  },
  created() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      let { data } = await getBanner();
      this.banners = data.message;
    },
    toDetail(id){
      this.$router.push('/gooddetail/'+ id)
    }
  },
};
</script>

<style scoped lang='less'>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 180px;
  line-height: 180px;
  text-align: center;
  img{
      width: 100%;
      height: 100%;
  }
}
</style>